<template>
	<view>
		<view class="page">
			<comp-common v-bind="{data:data}" @getUserInfo="getUserInfo" @myLogin="myLogin" @getPhoneNumber="getPhoneNumber" @hideGetCoupon="hideGetCoupon" @closeCouponBox="closeCouponBox" @navigatorClick="navigatorClick"></comp-common>
			<comp-header v-bind="{data:data}" @relevanceError="relevanceError" @relevanceSuccess="relevanceSuccess"></comp-header>
			<view class="body after-navber">
				<view class="flex-row card-top">
            <view class="flex-grow-1 flex-x-center">
                <view @tap="goto" :class="['flex-y-center', data.status==2?'':'active']" data-status="1">未使用</view>
            </view>
            <view class="flex-grow-1 flex-x-center">
                <view @tap="goto" :class="['flex-y-center', data.status==2?'active':'']" data-status="2">已失效</view>
            </view>
        </view>
        <view class="card-list" v-if="data.list.length>0">
            <view class="card-one flex-col" v-for="(item,index) in data.list" :key="index">
                <view class="flex-row flex-y-center flex-grow-1">
                    <navigator class="flex-row flex-y-center flex-grow-1" openType="navigate" :url="'/pages/card-detail/card-detail?user_card_id='+item.id">
                        <view class="flex-grow-0">
                            <image class="img" :src="item.card_pic_url"></image>
                        </view>
                        <view class="flex-grow-1">
                            <view class="text-more-2">{{item.card_name}}</view>
                        </view>
                    </navigator>
                    <view @tap="getQrcode" class="flex-grow-0" :data-index="index" v-if="item.is_use==0">
                        <image class="img-1" :src="data.__wxapp_img.card.qrcode.url"></image>
                    </view>
                </view>
                <view class="flex-row flex-grow-0 fs-sm" style="justify-content:flex-end;margin-bottom:20upx;" v-if="item.is_use==1">使用时间：{{item.clerk_time}}</view>
            </view>
        </view>
        <view class="flex-x-center fs-sm" style="padding-top:140upx" v-else>暂无卡券</view>
        <view @tap="hide" :class="['flex-row flex-y-center modal', data.show_qrcode?'':'hide']">
            <view class="flex-y-center" style="width:100%;padding:100upx;">
                <view style="background-color:#fff;width:100%;height:100%;border-radius:10upx;padding:50upx 50upx;">
                    <view class="flex-x-center fs-b" style="width:100%;height:50upx;margin-bottom:20upx">卡券二维码</view>
                    <image :src="data.qrcode" style="width:450upx;height:450upx;"></image>
                    <view class="w-100 flex-x-center">
                        <view catchtap="save" class="save-btn flex-x-center flex-y-center">保存图片</view>
                    </view>
                </view>
            </view>
        </view>
			</view>
			<comp-footer v-bind="{data:data}"></comp-footer>
		</view>
	</view>
</template>

<script>var myVue = {};
	var t = !1;
	export default {
		data() {
			return {
				data: {
        page: 1,
        show_qrcode: !1,
        status: 1,
				list: []
    },
			};
		},
		onLoad: function(t) {myVue = this;
        myVue.getApp.page.onLoad(this, t), t.status && this.setData({
            status: t.status
        }), this.loadData();
    },
		onReachBottom: function() {
        myVue.getApp.page.onReachBottom(this), this.data.page != this.data.page_count && this.loadMore();
    },
		methods: {
			loadData: function() {
        var t = this;
        myVue.getApp.core.showLoading({
            title: "加载中"
        }), myVue.getApp.request({
            url: myVue.getApp.api.user.card,
            data: {
                page: 1,
                status: t.data.status
            },
            success: function(e) {
                0 == e.code && t.setData(e.data);
            },
            complete: function() {
                t.getApp.core.hideLoading();
            }
        });
    },
		loadMore: function() {
        var e = this;
        if (!t) {
            t = !0, myVue.getApp.core.showLoading({
                title: "加载中"
            });
            var a = e.data.page;
            myVue.getApp.request({
                url: myVue.getApp.api.user.card,
                data: {
                    page: a + 1,
                    status: e.data.status
                },
                success: function(t) {
                    if (0 == t.code) {
                        var o = e.data.list.concat(t.data.list);
                        e.setData({
                            list: o,
                            page_count: t.data.page_count,
                            row_count: t.data.row_count,
                            page: a + 1
                        });
                    }
                },
                complete: function() {
                    t = !1, e.getApp.core.hideLoading();
                }
            });
        }
    },
    getQrcode: function(t) {
        var e = this, a = t.currentTarget.dataset.index, o = e.data.list[a];
        myVue.getApp.core.showLoading({
            title: "加载中"
        }), myVue.getApp.request({
            url: myVue.getApp.api.user.card_qrcode,
            data: {
                user_card_id: o.id
            },
            success: function(t) {
                0 == t.code ? e.setData({
                    show_qrcode: !0,
                    qrcode: t.data.url
                }) : e.getApp.core.showModal({
                    title: "提示",
                    content: t.msg,
                    showCancel: !1
                });
            },
            complete: function() {
                e.getApp.core.hideLoading();
            }
        });
    },
    hide: function() {
        this.setData({
            show_qrcode: !1
        });
    },
    goto: function(t) {
        var e = t.currentTarget.dataset.status;
        myVue.getApp.core.redirectTo({
            url: "/pages/card/card?status=" + e
        });
    },
    save: function() {
        var t = this;
        myVue.getApp.core.saveImageToPhotosAlbum ? (myVue.getApp.core.showLoading({
            title: "正在保存图片",
            mask: !1
        }), myVue.getApp.core.downloadFile({
            url: t.data.qrcode,
            success: function(e) {
                myVue.getApp.core.showLoading({
                    title: "正在保存图片",
                    mask: !1
                }), t.saveImg(e);
            },
            fail: function(e) {
                myVue.getApp.core.showModal({
                    title: "下载失败",
                    content: e.errMsg + ";" + t.data.goods_qrcode,
                    showCancel: !1
                });
            },
            complete: function(t) {
                myVue.getApp.core.hideLoading();
            }
        })) : myVue.getApp.core.showModal({
            title: "提示",
            content: "当前版本过低，无法使用该功能，请升级到最新版本后重试。"
        });
    },
    saveImg: function(t) {
        var e = this;
        myVue.getApp.core.saveImageToPhotosAlbum({
            filePath: t.tempFilePath,
            success: function() {
                myVue.getApp.core.showModal({
                    title: "提示",
                    content: "保存成功",
                    showCancel: !1
                });
            },
            fail: function(t) {
                myVue.getApp.core.getSetting({
                    success: function(a) {
                        a.authSetting["scope.writePhotosAlbum"] || myVue.getApp.getauth({
                            content: "小程序需要授权保存到相册",
                            author: "scope.writePhotosAlbum",
                            success: function(a) {
                                a && e.saveImg(t);
                            }
                        });
                    }
                });
            },
            complete: function(t) {
                myVue.getApp.core.hideLoading();
            }
        });
    }
		},
	}
</script>

<style scoped>
.card-top {
    width: 100%;
    height: 90upx;
    border-top: 1upx solid #e3e3e3;
    border-bottom: 1upx solid #e3e3e3;
    background-color: #fff;
    position: fixed;
    top: var(--window-top);
    left: 0;
}

.active {
    color: #ff4544;
    border-bottom: 4upx solid #ff4544;
}

.card-list {
    padding: 20upx;
    padding-top: 110upx;
}

.card-one {
    margin-bottom: 20upx;
    background-color: #fff;
    width: 702upx;
    height: 180upx;
    padding-right: 40upx;
}

.img {
    width: 88upx;
    height: 88upx;
    border-radius: 88upx;
    margin-right: 34upx;
    margin-left: 24upx;
}

.img-1 {
    width: 50upx;
    height: 50upx;
    margin-left: 60upx;
}

.hide {
    display: none;
}

.modal {
    position: fixed;
    top: var(--window-top);
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 9999;
}

.save-btn {
    width: 200upx;
    height: 60upx;
    background-color: #ff4544;
    color: #fff;
    border-radius: 10upx;
    margin-top: 10upx;
}
</style>
